<template>
  <div class="material-list">
    <div class="list-header">
      <div class="header-actions">
        <el-button type="primary" @click="handleAdd"> <Icon icon="ep:plus" />添加资料 </el-button>
        <el-button type="success" @click="handleBatchUpload">
          <Icon icon="ep:upload-filled" />批量上传
        </el-button>
      </div>
    </div>

    <el-table :data="materials" stripe v-loading="loading">
      <el-table-column prop="name" label="资料名称" />
      <el-table-column prop="type" label="类型" width="100" />
      <el-table-column prop="creator" label="创建用户" width="120" />
      <el-table-column prop="createTime" label="创建日期" width="120" :formatter="dateFormatter" />
      <el-table-column prop="version" label="版本" width="100" />
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button size="small" @click="handleDownload(row)">下载</el-button>
          <el-button size="small" type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { dateFormatter } from '@/utils/formatTime'
import type { MaterialVO } from '@/api/agent/manage/material'

defineOptions({ name: 'MaterialList' })

interface Props {
  materials: MaterialVO[]
  loading?: boolean
  category: string
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
})

const emit = defineEmits<{
  add: [category: string]
  edit: [material: MaterialVO]
  delete: [material: MaterialVO]
  download: [material: MaterialVO]
  batchUpload: [category: string]
}>()

const handleAdd = () => {
  emit('add', props.category)
}

const handleEdit = (material: MaterialVO) => {
  emit('edit', material)
}

const handleDelete = (material: MaterialVO) => {
  emit('delete', material)
}

const handleDownload = (material: MaterialVO) => {
  emit('download', material)
}

const handleBatchUpload = () => {
  emit('batchUpload', props.category)
}
</script>

<style lang="scss" scoped>
.material-list {
  .list-header {
    margin-bottom: 20px;

    .header-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }
  }
}
</style>
